<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j con-box uc-order">
    <!-- 订单列表 -->
    <div class="order-list">
      <div class="order-table">
        <table
          style="border-spacing: 0"
          class="box"
        >
          <tbody>
            <tr class="box-tit">
              <th>{{ $t('products') }}</th>
              <th style="width: 110px;">
                {{ $t('quantity') }}
              </th>
              <th
                style="width: 120px;"
                class="pr"
              >
                {{ $t('priceOne') }}
              </th>
              <th style="width: 130px;">
                {{ $t('totalAll') }}
              </th>
              <th style="width: 130px;">
                {{ $t('status') }}
              </th>
              <th style="width: 130px;">
                {{ $t('operation') }}
              </th>
            </tr>
          </tbody>
          <tbody
            v-for="(order, index) in orderList"
            :key="index"
          >
            <tr class="box-space">
              <td colspan="6" />
            </tr>
            <tr class="box-hd">
              <td colspan="6">
                <div class="order-number">
                  {{ $t('orderNumberT') }}：
                  <span class="num">{{ order.orderNumber }}</span>
                </div>
                <router-link
                  :to="{
                    path: '/shop-index',
                    query: {
                      sid: order.shopId
                    }
                  }"
                  class="shop"
                >
                  <span class="shop-icon" />
                  {{ order.shopName }}
                </router-link>
                <a
                  href="javascript:void(0);"
                  class="btn-im"
                  style="float: left;"
                  @click="toChat(order.shopId, order.orderNumber)"
                />
              </td>
            </tr>
            <tr
              v-for="(orderItem, orderItemIndex) in order.orderItemDtos"
              :key="orderItemIndex"
              class="box-tr"
            >
              <td>
                <div class="goods-info">
                  <a
                    href="javascript:void(0);"
                    class="img"
                    @click="toOrderDetail(order.orderNumber)"
                  >
                    <img
                      v-if="orderItem.pic"
                      :src="checkFileUrl(orderItem.pic)"
                      alt
                      @error="handlePicError"
                    >
                    <img
                      v-else
                      src="@/assets/img/def.png"
                      alt
                    >
                  </a>
                  <div class="name-sku">
                    <a
                      href="javascript:void(0);"
                      class="name"
                      @click="toOrderDetail(order.orderNumber)"
                    >{{ orderItem.prodName }}</a>
                    <span class="sku">{{ orderItem.skuName }}</span>
                  </div>
                </div>
              </td>
              <td>
                <div class="goods-number">
                  ×{{ orderItem.prodCount }}
                </div>
              </td>
              <td class="pr">
                <div class="amount">
                  <span class="price">￥{{ orderItem.price }}</span>
                </div>
              </td>
              <td
                v-if="orderItemIndex === 0"
                :rowspan="order.orderItemDtos.length"
                class="bl"
              >
                <div class="amount">
                  <span class="price">
                    <span v-if="order.actualTotal">￥{{ order.actualTotal }}</span>
                    <span v-if="order.actualTotal && order.useScoreTotal"> + </span>
                    <span v-if="order.useScoreTotal">{{ order.useScoreTotal }}积分</span>
                  </span>
                  {{
                    [$t('payment.pointPay'), $t('payment.wechatPay'), $t('payment.aliPay'), $t('payment.wechatPay'), $t('payment.wechatPay'), $t('payment.wechatPay'), $t('payment.aliPay'), $t('payment.aliPay'), $t('payment.wechatPay'), $t('payment.balancePay')][order.payType]
                  }}
                </div>
              </td>
              <td
                v-if="orderItemIndex === 0"
                :rowspan="order.orderItemDtos.length"
                class="bl"
              >
                <div class="status">
                  <div :class="['text', order.status > 4 ? '' : 'no-finish']">
                    {{
                      [
                        '',
                        $t('obligation'),
                        $t('pendingDelivery'),
                        $t('pendingReceipt'),
                        $t('pendinEvaluation'),
                        $t('completed'),
                        $t('canceled')
                      ][order.status]
                    }}
                  </div>
                  <a
                    href="javascript:void(0);"
                    class="order-detail"
                    @click="toOrderDetail(order.orderNumber)"
                  >{{ $t('ucOrder.orderDetails') }}</a>
                </div>
              </td>
              <td
                v-if="orderItemIndex === 0 && order.isComm === 0"
                :rowspan="order.orderItemDtos.length"
                class="bl"
              >
                <div class="action">
                  <a
                    href="javascript:void(0);"
                    :class="['action-btn', 'active']"
                    @click="orderComment(order,order.orderType)"
                  >{{ $t('ucOrder.postComment') }}</a>
                </div>
              </td>
              <td
                v-if="orderItemIndex === 0 && order.isComm === 1"
                :rowspan="order.orderItemDtos.length"
                class="bl"
              >
                <div class="action">
                  <a
                    href="javascript:void(0);"
                    :class="['action-btn', 'default']"
                    @click="orderComment(order,order.orderType)"
                  >{{ $t('ucOrder.viewComments') }}</a>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 页码 -->
      <pagination
        v-model="current"
        :pages="pages"
        @change-page="getCommentPage"
      />
      <!-- 页码 -->
    </div>
    <!-- /订单列表 -->
    <!-- 空列表提示 -->
    <empty-all-tips
      v-if="isEmpty"
      :text="$t('ucOrder.noRelatedOrders')"
      :back="$t('ucOrder.lookOthers')"
      :src-type="1"
    />
    <!-- /空列表提示 -->
  </div>
</template>

<script setup>
import defPng from '@/assets/img/def.png'
import { checkFileUrl } from '@/utils/index.js'
const route = useRoute()
const router = useRouter()

onMounted(() => {
  // 设置网页标题
  document.title = $t('ucOrder.evaluationSunshine')
  getOrderList()
})

/**
 * 加载默认图片
 */
const handlePicError = (e) => {
  e.target.src = defPng
}

/**
 * 跳转客服
 */
const toChat = (shopId, orderNumber) => {
  const shoppId = shopId || 1
  let routeUrl
  if (shopId == null) {
    routeUrl = router.resolve({
      path: '/chat',
      query: {
        shopId: shoppId,
        chatType: 1,
        orderNumber
      }
    })
  } else {
    routeUrl = router.resolve({
      path: '/chat',
      query: {
        shopId: shoppId,
        orderNumber
      }
    })
  }
  window.open(routeUrl.href, 'view_window')
}

const isEmpty = ref(false)
const current = ref(route.query.current || 1) // 当前页数
const orderList = ref([])
const pages = ref(0) // 总页数
/**
 * 获取评论订单列表
 */
const getOrderList = () => {
  isEmpty.value = false
  http.get('/p/myOrder/myOrderComment', {
    params: {
      current: current.value,
      size: 10
    }
  }).then(({ data }) => {
    orderList.value = data.records.filter((item) => {
      item.useScoreTotal = 0
      item.orderItemDtos = item.orderItemDtos.filter((item1) => {
        item.useScoreTotal += item1.useScore
        return item1.returnMoneySts !== 5
      })
      return item.orderItemDtos.length > 0 && item.orderType !== 3 && item.status === 5
    })
    isEmpty.value = !orderList.value.length
    pages.value = data.pages
  })
}

/**
 * 请求评论订单列表
 */
const getCommentPage = () => {
  getOrderList()
}

/**
 * 跳转订单详情
 */
const toOrderDetail = (orderNumber) => {
  router.push({ path: '/order-detail', query: { orderNumber } })
}
/**
 * 发表评论
 */
const orderComment = (orderItem, orderType = null) => {
  if (orderItem.isComm === 0) {
    router.push({
      path: '/write-comments',
      query: {
        orderNumber: orderItem.orderNumber,
        isComm: orderItem.isComm,
        orderType
      }
    })
  } else {
    router.push({
      path: '/write-comments',
      query: {
        orderItemId: orderItem.orderItemId,
        isComm: orderItem.isComm,
        orderType,
        orderNumber: orderItem.orderNumber
      }
    })
  }
}

</script>

<style lang="scss" scoped>
@use "../uc-order/index";
</style>

<style lang="scss" scoped>
@use "../common/scss/user-center";
</style>
